<template>
  <div class="box">
    <!-- 头部搜索表单 -->
    <div class="form">

      <el-form ref="form" :model="form">

        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="司机账号:" label-width="110px">
              <el-input v-model="form.account" style="width:280px;" placeholder="请输入司机账号" />
            </el-form-item>
          </div>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="司机姓名:">
              <el-input v-model="form.name" style="width:280px;" placeholder="请输入司机姓名" />
            </el-form-item>
          </div>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="司机手机号:">
              <el-input v-model="form.phone" style="width:280px;" placeholder="请输入司机手机" />
            </el-form-item>
          </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label-width="110px" label="所属机构:">
              <el-select
                ref="select"
                value=""
                style="width:280px;"
                :placeholder="valu?valu:`请选择所属机构`"
              >
                <el-option value="valu">
                  <el-tree
                    :data="list"
                    :props="defaultProps"
                    :check-on-click-node="true"
                    @node-click="handleNodeClick"
                  />
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item>
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </div>
          </el-col>
        </el-row>

      </el-form>
    </div>

    <!-- 列表 -->
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="500"
      >
        <el-table-column
          type="index"
          :index="indexMethod"
          prop="row"
          label="序号"
          width="90"
        />
        <el-table-column
          prop="account"
          label="司机账号"
          width="210"
        />
        <el-table-column
          prop="name"
          label="司机姓名"
          width="210"
        />
        <el-table-column
          prop="mobile"
          label="司机电话"
          width="210"
        />
        <el-table-column
          prop="truck.licensePlate"
          label="关联车辆"
          width="210"
        />
        <el-table-column
          prop="agency.name"
          label="所属机构"
          width="210"
        />
        <el-table-column
          prop="workStatus"
          label="工作状态"
          width="250"
        >
          <template v-slot="{ row }">
            <span v-if="row.workStatus === 0">休息</span>
            <span v-else-if="row.status === 1">上班</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <template v-slot="{ row }">
            <el-button type="text" @click="userId(row.userId)">查看</el-button>
            <template>
              <el-button type="text" @click="open(row.userId)">配置车辆</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="foot">
      <el-pagination
        :page-size="+form.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="+form.page"
        :total="+total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog title="收货地址" :visible="showDialog" @close="showDialog=false">
      <div class="top">
        <p>
          <span style="margin-left:150px">司机编号： {{ id }}</span>
          <span style="margin-left:150px">司机名称： {{ name }}</span>
        </p>
        <p>
          <span style="margin-left:150px">司机电话： {{ mobile }}</span>
          <span style="margin-left:200px">所属机构： {{ agency }}</span>
        </p>
      </div>
      <template>
        <span>配置车辆：</span>
        <el-select v-model="value" placeholder="请选择" @change="change">
          <el-option
            v-for="item in options"
            :key="item.value"
            class="aa"
            :label="item.licensePlate"
            :value="item.id"
          />
        </el-select>
      </template>

      <el-table
        :data="tableDataList"
        style="width: 100%"
      >
        <el-table-column
          prop="licensePlate"
          label="车牌号"
          width="280"
        />
        <el-table-column
          prop="workStatus"
          label="车辆状态"
          width="320"
        >
          <template v-slot="{ row }">
            <span v-if="row.workStatus === 0">停用</span>
            <span v-else-if="row.workStatus === 1">启用</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <el-button type="text" @click="$router.push(`/car/details/${value}`)">查看</el-button>
          <el-button type="text" @click="del">删除</el-button>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="ensure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getDriver, getParticulars, unWorkingTrucks, getTrucks } from '@/api/branches'
import { replaceKeyNameWithLabelInArray } from '@/utils/index'
import { getManagerTree } from '@/api/essential'
export default {
  data() {
    return {
      options: [],
      tableDataList: [],
      value: '',
      showDialog: false,
      valu: '',
      form: {
        account: '',
        agentId: '',
        name: '',
        page: '1',
        pageSize: '10',
        phone: '',
        workStatus: ''
      }, // 表单数据
      total: 0,
      tableData: [],
      list: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      id: '', // 司机详情编号
      name: '', // 司机详情名字
      agency: '', // 司机详情所属机构
      mobile: ''// 司机详情电话
    }
  },
  async created() {
    this.getDriver()
    const res = await getManagerTree()
    const arr = JSON.parse(res.data)

    this.list = replaceKeyNameWithLabelInArray(arr)
    console.log(this.list)
  },
  methods: {
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getDriver()
    },
    handleCurrentChange(val) {
      this.form.page = val
      this.getDriver()
    },
    indexMethod(index) {
      return index + this.form.pageSize * (this.form.page - 1) + 1
    },
    handleNodeClick(data) {
      console.log(data)
      this.valu = data.label
      this.form.agentId = data.id
      this.$refs.select.blur()
    },
    async getDriver() {
      const res = await getDriver(this.form)
      console.log(res)
      this.tableData = res.data.items
      console.log(res.data.pages)
      this.total = res.data.counts
    },
    search() {
      this.getDriver()
    },
    reset() {
      console.log(11)
      this.form.account = ''
      this.form.agentId = ''
      this.form.name = ''
      this.form.page = '1'
      this.form.pageSize = '10'
      this.form.phone = ''
      this.valu = ''
      this.workStatus = ''
      this.getDriver()
    },
    userId(id) {
      this.$router.push(`/branches/DriverDetail/${id}`)
    },
    open(id) {
      this.$confirm('<p>配置车辆需满足以下条件： <p> <p><span>1.司机信息已完善</span> <span style="margin-left:80px">2.司机已设置排版</span></p><span>3.司机绑定车辆未在启动状态</span>', '车辆配置', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        dangerouslyUseHTMLString: true
      }).then(async() => {
        // this.value = id
        const res = await getParticulars(id)
        this.id = res.data.id
        this.name = res.data.name
        this.agency = res.data.agency.name
        this.mobile = res.data.mobile
        const res1 = await unWorkingTrucks()
        console.log(res1)

        this.options = res1.data
        console.log(this.options)
        this.showDialog = true
        this.$message({
          type: 'success'

          // message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    async change() {
      const res = await getTrucks(this.value)
      console.log(res)
      console.log(res.data)
      this.tableDataList.push(res.data)
    },
    del() {
      this.tableDataList = []
    },
    async ensure() {
      // await postTruckDrivers({this.tableDataList[0].id,this.tableDataList[0].truckTypeId})
      this.showDialog = false
    }

  }
}
</script>

<style scoped lang="scss">
.box{
  padding: 15px 20px;
}

.form{
  background-color: white;
  padding: 15px 20px;
}
.table{
  margin-top: 20px;
  background-color: white;
  padding: 20px 20px;
}
.foot{
   display:flex;
  justify-content: center;
}
.el-select-dropdown__item{
  height: 200px;
}
.aa{
height: 50px;
}
</style>
